<!--
 * @Author: C.
 * @Date: 2023-03-09 15:47:39
-->
<script lang="tsx">
  import { defineComponent } from 'vue';
  import { Descriptions, DescriptionsItem } from 'ant-design-vue';

  import { projectSettings } from '/~/settings/projectSettings';
  import projectSettingObj from '/@/settings/projectSetting';
  import { isObject } from '/@/utils/is';
  export default defineComponent({
    setup() {
      function objRender(obj: Recordable, title: string) {
        return (
          <Descriptions bordered size="small" title={title} layout="vertical">
            {Object.keys(obj).map((key) => {
              return (
                <DescriptionsItem label={key}>
                  {isObject(obj[key]) ? objRender(obj[key], key) : obj[key].toString()}
                </DescriptionsItem>
              );
            })}
          </Descriptions>
        );
      }
      return () => (
        <div class="setting-view">
          {objRender(projectSettings, '开发配置')}
          {objRender(import.meta.env, '环境配置')}
          {objRender(projectSettingObj, '项目配置')}
        </div>
      );
    },
  });
</script>
<style lang="less" scoped>
  .setting-view {
    background-color: @component-background;
    padding: 10px 20px 100px 20px;
  }
</style>
